<template>
    <view class="page">
        <back-top v-if="showTop"></back-top>
        <view class="top-box bgwhite d-flex a-center">
            <view class="search flex-1 height bgF5 d-flex a-center">
                <text class="iconfont icon-search m-right10"></text>
                <input class="flex-1 size28" v-model="queryStr" placeholder="请输入表单名" confirm-type="search" @confirm="confirm" />
            </view>
            <text class="iconfont icon-zengjia size42 m-left30" @click="toUrl('/pages/form/addForm')"></text>
        </view>
        <view class="list">
            <view class="item bgwhite p-re" v-for="(item,index) in list" :key="index">
                <view class="bold m-bot14">{{ item.order_name }}</view>
                <view class="m-bot14">{{ item.startDate }} - {{ item.endDate }}</view>
                <view class="m-bot24">共提交：{{ item.allNum }}</view>
                <view class="d-flex j-end">
                    <view class="btn btn_1 color_99" @click="toUrl('/pages/form/fieldList?order_id=' + item.order_id)">字段</view>
                    <view class="btn btn_2" @click="toUrl('/pages/form/addForm?order_id=' + item.order_id)">
                        <text class="iconfont icon-bianji white"></text>
                    </view>
                </view>
            </view>
        </view>
        <empty v-if="noData" type="1" msg="没有相关的预约表单哦"></empty>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                showTop: false,
                list: [],
                queryStr: '',
                page: 1,
                size: 10,
                noData: false,
                more: false
            }
        },
        onLoad() {
            this.getList()
        },
        methods: {
            getList() {
                this.noData = false
                this.more = false
                this.$http.post({
                    url: '/SRA_CustomerForm/showStoreAppointmentForm',
                    data: {
                        bid: uni.getStorageSync('bid'),
                        shop_id: uni.getStorageSync('store_id'),
                        page: this.page,
                        size: this.size,
                        queryStr: this.queryStr
                    }
                }).then(res => {
                    let result = res.data || []
                    this.list = this.list.concat(result)
                    if(result.length >= this.size) this.more = true
                    if(!this.list.length) this.noData = true
                    uni.stopPullDownRefresh()
                })
            },
            confirm(e) {
                if(e) this.queryStr = e.detail.value
                this.page = 1
                this.list = []
                this.getList()
            }
        },
        onReachBottom() {
            if(this.more) {
                this.page ++
                this.getList()
            }
        },
        onPullDownRefresh() {
            this.confirm()
        },
        onPageScroll(e) {
            if(e.scrollTop > 520) {
                this.showTop = true
            }else {
                this.showTop = false
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        padding-top: 88rpx;
        view {
            font-size: 28rpx;
        }
    }
    .top-box {
        width: 100%;
        height: 88rpx;
        padding: 16rpx 30rpx;
        position: fixed;
        top: 0;
        z-index: 3;
        .search {
            border-radius: 56rpx;
            padding: 0 28rpx;
        }
    }
    .list {
        padding: $page-space;
        .item {
            border-radius: $border-radius-sm;
            padding: 24rpx $page-space;
            margin-bottom: $page-space;
            &::before {
                content: '';
                width: 4rpx;
                height: 24rpx;
                background: $uni-color-primary;
                border-radius: 0 4rpx 4rpx 0;
                position: absolute;
                left: 0;
                top: 32rpx;
            }
        }
    }
    .btn {
        padding: 0 24rpx;
        line-height: 56rpx;
        border-radius: 56rpx;
        margin-left: 20rpx;
        &.btn_1 {
            border: 1rpx solid #afafaf;
        }
        &.btn_2 {
            background: $uni-color-primary;
        }
    }
</style>